<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>测试一</button>
  <button>测试二</button>
  <button id="btn3">测试三</button>
  <button>测试四</button>
  <!-- 
    1.jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
    2.基本行为
      * size()/length：包含的DOM元素个数
      * [idnex]/get(index)：得到对应位置的DOM元素
      * each()：遍历包含的所有DOM元素
      * index()：得到在所在兄弟元素中的下标
   -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    $(function () {
      // 需求1 统计一共有多少个按钮
      var $btns = $('button')
      // 输出$btns看一下 发现它并不是一个数组 而是一个伪数组
      console.log($btns);
      // size()/length：包含的DOM元素个数
      console.log($btns.size());
      console.log($btns.length);

      // 需求2 取出第二个button的文本
      // [idnex] / get(index) ：得到对应位置的DOM元素
      console.log($btns[1].innerHTML);
      console.log($btns.get(1).innerHTML);

      // 需求3 输出所有button标签的文本
      // each() ：遍历包含的所有DOM元素
      $btns.each(function (index, domEle) {
        console.log(index, domEle.innerHTML, this);
      })

      // 需求4 输出‘测试三’按钮是所有按钮中的第几个
      // index() ：得到在所在兄弟元素中的下标
      console.log($('#btn3').index());
    })
  </script>
</body>
</html>